<template>
    <div class="withdraw-wrap">
        <G_header title="可提现余额" />
        <div class="header-wrap">
             <div class="header clearfix">
                <h1>{{ userInfo.account.money }}</h1>
                <p>可提现余额(元)</p>
                <div class="clearfix"> 
                    <button class="r" @click="getrecharge">立即提现</button>
                </div>
            </div>
        </div>
        <div class="tabs">
            <van-tabs :border="false" background="rgba(0,0,0,0)" v-model="active">
                <van-tab title="提现记录">
                    <div class="container">
                      <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="getData"
                        >
                    
                        <div class="items" v-for="(item,index) in withdrawData" :key="index">
                            <div>
                                <van-image
                                width="50"
                                height="50"
                                round
                                :src="item.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'"
                                />
                            </div>
                            <div class="info">
                                <p class="title">
                                    {{ item.realname }} &nbsp;&nbsp;&nbsp; ¥ {{item.money}}
                                </p>
                                <p class="time">
                                    {{ item.updated_at }}
                                </p>
                            </div>
                            <div>
                                <template v-if="item.status == 'Wait'">
                                    <span style="color:#eacd71">申请中</span> 
                                </template>
                                <template v-else-if="item.status == 'Finish'">
                                    <span style="color:#07c160">已完成</span>
                                </template>
                                <template v-else-if="item.status == 'Fail'">
                                    <span style="color: red;">已拒绝</span>
                                </template>
                                <template v-else>
                                    同意申请
                                </template>
                            </div>
                        </div>

                        </van-list>
                    </div>
                
                </van-tab>
                <van-tab title="返利说明">
                    <div class="container" style="text-align: center;line-height: 30px">
                        暂无数据
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    name: 'withdraw',
    data(){
        return {
            active: 0,
            withdrawData:[],
            withdrawpage:[],
            userInfo: null,
            loading: true,
            finished: false,
            c_page: 0,
            l_page: null
        }
    },
    created(){
        this.userInfo = this.global.state.userInfo;
        console.log(this.userInfo)
        this.getData();
    },
    methods:{
        getData(){
            let params = {};
            params.token = sessionStorage.getItem("token");
            params.page = this.c_page;
            if(this.withdrawData.length == 0 || this.c_page <= this.l_page){
                axios.get('/api/store/user/withdrawal/list',{params}).then(res=>{
                    if(res.data.data.current_page == 1){
                        this.c_page = res.data.data.current_page +1;
                        this.l_page = res.data.data.last_page;
                        this.withdrawData = res.data.data.data;
                        this.loading = false;
                    }else if(res.data.data.current_page <= res.data.data.last_page){
                        this.withdrawData = [...this.withdrawData,...res.data.data.data];
                        if(res.data.data.data.length < 20){
                             this.loading = false;
                             this.finished = true;
                        }
                    }else {
                        this.loading = false;
                        this.finished = true;
                    }
                }).catch(err=>{
                    console.log(err);
                })
            }else {
                this.loading = false;
                this.finished = true;
            }
            
        },
        getrecharge(){
            this.$router.push({path:'../drawApply/type'})
        }
    }

}
</script>
<style scoped lang="less">
.withdraw-wrap {
    background: #f3f3f3;
    .header-wrap {
        padding: 5px 10px;
        .header {
            padding: 10px 0;
            border-radius:  8px;
            width: 100%;
            color: white;
            background-image: linear-gradient( to bottom, rgb(234,205,113) 0%, rgba(214,151,91) 100%);
            h1,p {
                text-align: center;
                margin: .35rem 0;
                font-weight: 500;
            }
            .r {
                margin: 0 10px 0 0;
                background: rgba(231,206,152);
                color: white;
                border:none;
                border-radius: 4px;
                padding: 4px 8px;
                font-size: 12px;
            }
        }
    }
    .tabs {
        padding: 10px 0;
        .container {
            text-align: center;
            
        }
    }
}
.container {
    padding-top: 10px;
}
.items {
    display: grid;
    margin: 5px 0;
    padding: 5px 7px;
    background: white;
    grid-template-columns:  50px 1fr 60px;
    .info p{
        margin: .4rem 0;
        padding-left: .5rem;
        text-align: left;
    }
}
.items div:nth-child(3){
    line-height: 4rem;
}
</style>